<template>
    <div>
        <div class="bigbox">
            <input
                type="file"
                hidden
                id="clickme"
                multiple
                @change="changeFile"
            />
            <div v-for="(item, index) in filesArr" :key="index" class="upbox">
                <Up :file="item" @uppic="uppicHandler" />
            </div>
    <!-- {{ serveFileNameArr }}{{choosedDirectory}} -->
        </div>
        <div>
            文件夹选择
            <Select style="width:200px" v-model="choosedDirectory">
                <Option
                    :value="item"
                    v-for="item in allDirectoryName"
                    :key="item"
                    >{{ item }}</Option
                >
            </Select>
        </div>
    </div>
</template>

<script>
import Up from "./Up.vue";
import axios from "axios";
export default {
    async created() {
        const arr = await axios.get("/api/getdr").then(data => data.data);
        this.allDirectoryName = arr;
    },
    data() {
        return {
            filesArr: [],
            allDirectoryName: [],
            choosedDirectory: "未分类图片",
            // 已上传图片数
            n: 0,
            // 返回的上传图片名
            serveFileNameArr: []
        };
    },
    components: {
        Up
    },
    mounted() {
        // 创建模拟点击事件,MouseEvents表示鼠标事件
        const e = document.createEvent("MouseEvents");
        // 初始化为点击事件
        e.initEvent("click", true, true);
        // 通过ID得到input框并发出事件请求
        document.getElementById("clickme").dispatchEvent(e);
    },
    methods: {
        changeFile(e) {
            // console.log(e.target.files);
            this.filesArr = e.target.files;
        },
        uppicHandler(filename) {
            // 上传完图片后返回名字并且计数
            // 上传一次用一次up组件，就加一
            this.n++;
            this.serveFileNameArr.push(filename);
            // 判断是否全部上传完
            if(this.n==this.filesArr.length){
                this.$emit('upover');
            }
        }
    }
};
</script>

<style lang="less">
.bigbox {
    overflow: hidden;
}
.upbox {
    border: 1px solid #000;
    margin-right: 10px;
    margin-bottom: 10px;
    float: left;
    width: 100px;
    height: 100px;
    position: relative;
    img {
        max-width: 100px;
        max-height: 100px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
}
</style>
